<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="box-swiper-hot">
		<view class="box-swiper-hot-box">
			<view class="box-swiper-hot-box-left">
				<text class="_name" :style="item.leftText_1.css">
					{{item.leftText_1.name[$i18n.locale]}}
				</text>
				<text class="_hot" :style="item.leftText_2.css">
					{{item.leftText_2.name[$i18n.locale]}}
				</text>
			</view>
			<swiper
				:autoplay="true"
				:vertical="true">
				<template v-if="listStatus == 'success'">
					<swiper-item v-for="item in list">
						<view
							@click="$_to('post/detail?pid=' + item.pid)"
							class="swiper-item">{{item.title?item.title:$_filterHtml(item.content)}}</view>
					</swiper-item>
				</template>
				<template v-if="listStatus == 'loading'">
					<swiper-item>
						<view class="swiper-item">loading...</view>
					</swiper-item>
				</template>
				<template v-if="listStatus == 'empty'">
					{{$t('listEmpty')}}
				</template>
			</swiper>
			<text class="iconfont icon-arrow-right"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"box-swiper-hot",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				listStatus:"loading",
			};
		},
		mounted(){
			this.getList();
		},
		methods:{
			getList(){
				this.$_request(
					"GET", "/api/fresns/v1/post/list",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"pid,title,content",
						"page":1
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = res.data.data.list;
							this.listStatus = "success";
						} else {
							this.listStatus = "empty";
						}
					}
				)
			},
		}
	}
</script>

<style lang="scss" scoped>
.box-swiper-hot{
	.box-swiper-hot-box{
		display: flex;
		align-items: center;
		background: #FFF;
		padding: 20rpx 25rpx;
		.box-swiper-hot-box-left{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			._name{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			._hot{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		swiper{
			flex: 1;
			height: 28rpx;
			margin: 0 15rpx;
			swiper-item{
				.swiper-item{
					font-size: 28rpx;
					line-height: 28rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
		.icon-arrow-right{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			line-height: 28rpx;
			color: $placeholder;
		}
	}
}
</style>